<template>
  <view class="">
    <!-- 头部区域 -->
    <view class="header">
      <view class="headerL">账号登录</view>
      <view class="headerR">
        <text>手机号登录</text>
        <view class="icon">
          <image src="../../static/login_icons/路径 5.png" mode=""></image>
        </view>
      </view>
    </view>
    <!-- 表单区域 -->
    <view class="main">
     
      <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
      <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
        <u-form-item label=" " prop="account" borderBottom ref="item1">
          <u--input v-model="form.account" border="none" disabledColor="#ffffff" placeholder="请输入账号" ref="account"></u--input>
        </u-form-item>
        <u-form-item label=" " prop="password" borderBottom type="text">
          <u--input type="password" v-model="form.password" disabledColor="#ffffff" placeholder="请输入密码" border="none" ref="password"></u--input>
         
        </u-form-item>
      </u--form>
    </view>
    <!-- 底部区域 -->
    <view class="footer" @click="onsubmit">登录</view>

  </view>
</template>

<script>
  export default {
    name: '',
    components: {},
    data() {
      return {
        form: {
          account:'',
          password:''
        },
        token:'',
      rules: {
      				'account': {
      					type: 'string',
      					required: true,
      					message: '请输入账号',
      					trigger: ['blur', 'change']
      				},
      				'password': {
      					type: 'string',
      					max: 11,
      					required: true,
      					message: '请输入密码',
      					trigger: ['blur', 'change']
      				}
      			},
      }
    },
    onReady() {
    		//onReady 为uni-app支持的生命周期之一
        	this.$refs.uForm.setRules(this.rules)
    },
    created() {
      
    },
    mounted() {},
    onLoad() {},
    methods: {
      // 点击登录跳转到Tab页面
    async onsubmit() {
      this.form.account = this.$refs.account.value
      this.form.password = this.$refs.password.value
       let res = await uni.$http.post('/login/account',{
         account:this.form.account,
         password:this.form.password
       })
       console.log(res)
       this.token = res.data.data
       uni.setStorageSync('token', this.token)
       if(res.data.data) {
         uni.showToast({
           title: '登录成功'
         })
         uni.switchTab({
           url: '/pages/index/index'
         })
       } else {
         uni.showToast({
          title: '登录失败'
         })
         uni.navigateTo({
           url:'/pages/login/login'
         })
       }
      }
    }
  }
</script>

<style lang="scss">
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 17px 32px;

    .headerL {
      font-size: 24px;
      color: #2A2929;
      font-weight: 600;
    }

    .headerR {
      display: flex;

      text {
        font-size: 16px;
        color: #EF4F3F;
        font-weight: 500;
        margin-right: 7px;
      }

      image {
        width: 10px;
        height: 10px;
      }
    }
  }

  .main {
    padding: 0 17px 32px;
  }

  .footer {
    width: 309px;
    height: 50px;
    background: #EF4F3F;
    border-radius: 24.77px;
    text-align: center;
    line-height: 50px;
    margin: 0 auto;
    color: #fff;
  }
</style>